<template>
  <el-dialog width="450px" title="Billable Users" :visible.sync="dialogVisible">
    <div>
      <p v-if="type==='1'">The number of users selected exceeds the maximum number of users you have purchased</p>
      <p v-if="type==='1'">Please purchase additional slots to enable more users</p>
      <p v-if="type!=='1'">Your free user settings will reduce your next cycle of payment. Please click Update to confirm that you accept the update to your payment cycle</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel" size="mini">Cancel</el-button>
      <el-button type="primary" size="mini" v-if="type==='2'" @click="update">Update</el-button>
      <PayConsumer component="el-button"
                   v-if="type==='1'"
                   size="mini"
                   type="primary"
                   :edit="true"
                   :disabled="!$hasPermission('pay:payment')"
                   :before-payment="beforePayment"
                   :catch-error-payment="catchErrorPayment"
                   @success="success">
        Add more users
      </PayConsumer>
    </span>
  </el-dialog>
</template>

<script>
import PayConsumer from '@/components/storybook/s-pay/pay-consumer'
export default {
  name: 'user-billable',
  components: {
    PayConsumer
  },
  props: {
    visible: {
      type: Boolean
    },
    type: {
      type: String
    },
    dtoList: {
      type: Array
    },
    totalUser: {
      type: Number
    }
  },
  data () {
    return {
      subDetail: {}
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    submit () {
      this.dialogVisible = false
      this.$emit('submit')
    },
    cancel () {
      this.dialogVisible = false
      this.$emit('cancel')
    },
    async catchErrorPayment (subscriptionId) {
    },
    async beforePayment () {
      const sub = this.dtoList[0]
      const pay = {
        subscriptionId: sub.subscriptionId,
        // bundleExtraUsersNumber: sub.totalQuantity + sub.bundleExtraUsersNumber,
        // bundleExtraUsersId: sub.bundleExtraUsersId,
        // bundleOtherId: sub.bundleOtherId,
        addonsDtoList: [],
        planId: sub.bundleOtherId
      }
      pay.addonsDtoList = this.dtoList.map(item => {
        return {
          id: item.bundleExtraUsersId,
          quantity: item.totalQuantity + item.bundleExtraUsersNumber,
          unitPrice: item.unitPrice
        }
      })
      return pay
    },
    async success () {
      const { sub } = this.$interface.pay
      let subDetail = { }
      let att = {}
      this.dtoList.map(item => {
        if (item.bundleExtraUsersId.includes('Attendance-Dashboard')) {
          att = item
        } else {
          subDetail = item
        }
      })
      const params = {
        subscriptionId: this.dtoList[0].subscriptionId,
      }
      if (subDetail) {
        params.usersLimit = subDetail.totalQuantity + subDetail.bundleExtraUsersNumber
      }
      if (att.bundleExtraUsersNumber) {
        params.attendanceOnly = att.totalQuantity + att.bundleExtraUsersNumber
      }

      let { data: response } = await sub(params)
      if (response.code !== 0) {
        throw response.msg
      }
      this.dialogVisible = false
      this.$emit('submit')
    },
    async update () {
      const { updateFormItems } = this.$interface.pay
      let params = this.dtoList.map(item => {
        return {
          subscriptionId: item.subscriptionId,
          bundleExtraUsersId: item.bundleExtraUsersId,
          quantity: (item.totalQuantity - item.bundleExtraUsersNumber) > 0 ? item.totalQuantity - item.bundleExtraUsersNumber : 0,
          appId: item.appId
        }
      })
      const { data } = await updateFormItems(params)
      if (data.code === 0) {
        this.$message.success('Success')
        this.dialogVisible = false
        // this.$emit('submit', 'query')
        this.$emit('submit')
      } else {
        this.$message.error(data.msg)
      }
    }
  }
}
</script>

<style scoped>

</style>
